<template>
  <el-form
    v-if="isFormShow"
    ref="form"
    @validate="doValidate"
    class="pcic-form"
    :model="formData"
    :rules="handleFormRulesMode()"
    :formMode="formMode"
    v-bind="formOptions"
  >
    <slot name="header" :form="formData" :mode="formMode" :row="formDataStorage"/>

    <el-row v-bind="formOptions" class="fields-style">
      <template v-for="(item,key, index) in formTemplateStorage" >
        <el-col :key="index"
                v-if="getTemplateComponentAttr(item,'show', true,getContext(key))"
                :span="getTemplateComponentAttr(item,'span', 24)"
                :offset="getTemplateComponentAttr(item,'offset', 0)"
        >
          <d2-form-item
            :template="item"
            :colKey="key"
            :formData="formData"
            :ref="'form_item_'+key"
            :formMode="formMode"
            :getColumn="getFormComponentRef"
            @form-data-change="handleFormDataChange"
            @form-component-ready="handleFormComponentReady"
            @form-component-custom-event="handleFormComponentCustomEvent"
          >
            <template :slot="key+'FormSlot'">
              <slot :name="key+'FormSlot'" :form="formData" :mode="formMode" :row="formDataStorage"/>
            </template>
            <template :slot="key+'HelperSlot'">
              <slot :name="key+'HelperSlot'" :form="formData" :mode="formMode" :row="formDataStorage"/>
            </template>
          </d2-form-item>
        </el-col>
      </template>
    </el-row>

    <div class="form-body-append">
      <slot name="FormBodyAppendSlot" :mode="formMode" :form="formData" :row="formDataStorage"/>
    </div>
  </el-form>

</template>

<script>
import base from 'd2-crud-x/src/mixin/base'
import data from 'd2-crud-x/src/mixin/data'
import handleRow from 'd2-crud-x/src/mixin/handleRow'
import dialog from 'd2-crud-x/src/mixin/dialog'
import add from 'd2-crud-x/src/mixin/add'
import edit from 'd2-crud-x/src/mixin/edit'
import utils from 'd2-crud-x/src/mixin/utils'
import D2FormItem from 'd2-crud-x/src/components/d2-form-item'


export default {
  provide: function () {
    return {
      d2CrudContext: {
        getForm: this.getFormData,
        getLineEditor: () => {
          return this.lineEditor
        }
      }
    }
  },
  data(){
    return {
      lock: false
    }
  },
  mixins: [
    base,
    edit,
    data,
    handleRow,
    edit,
    add,
    // view,
    // remove,
    dialog,
    // pagination,
    // exposeMethods,
    utils
  ],
  components: {
    D2FormItem,

  },
  created () {
    this.handleAdd()
  },
  computed: {
    _tableListeners () {
      const events = this.options.events || {}
      if (this.isVxeTable()) {
        return {
          'checkbox-all': this.handleSelectAll,
          'checkbox-change': this.handleSelectionChange,
          ...events
        }
      } else {
        return {
          'select-all': this.handleSelectAll,
          'selection-change': this.handleSelectionChange,
          ...events
        }
      }
    }
  },
  methods: {
    async doValidate(){
      if(this.lock === false){
        this.lock = true
        try {
          await this.$refs.form.validate();
          this.$emit("validate", true)
          return true
        }catch (e){
          this.$emit("validate", false)
          return false
        }finally {
          this.lock = false
        }
      }
    },

    handleFormDataChange (event) {
      this.$emit('form-data-change', { getComponent: this.getFormComponentRef, ...event })
    },
    handleFormComponentReady (event) {
      this.$emit('form-component-ready', event)
    },
    handleFormComponentCustomEvent (event) {
      this.$emit('form-component-custom-event', event)
    },
    handleCellDataChange (column) {
      this.$emit('cell-data-change', column)
    },
    handleCellComponentReady (column) {
      this.$emit('cell-component-ready', column)
    },
    handleCellComponentCustomEvent (column) {
      this.$emit('cell-component-custom-event', column)
    },
    handleDialogOpened (event) {
      // TODO 暂时无效
      this.$emit('form-dialog-opened', { event: event, form: this.formData, row: this.formDataStorage })
    },
    getFormComponentRef (key) {
      if (this.$refs) {
        const wrapper = this.$refs['form_item_' + key]
        if (wrapper && wrapper.length > 0 && wrapper[0]) {
          return wrapper[0].getComponentRef()
        }
      }
    },
    buildColumnKey (item, index) {
      return (item.key || '') + (item.uniqueKey || '') + index // + new Date().getTime()
    },
    getContext (key) {
      return {
        mode: this.formMode,
        key: key,
        value: this.formData[key],
        form: this.formData,
        row: this.formDataStorage
      }
    }
  }
}
</script>

<style lang="scss">

.pcic-form{
  .d2p-dict-checkbox.el-checkbox-group {
    height: 32px;
    line-height: 32px;
  }
  .fields-style {
    .el-radio-group,
    .el-radio {
      padding-left: 12px;
    }

    .el-checkbox-group {
      padding-left: 12px;
    }
  //
  //  .el-form-item.is-required:not(.is-no-asterisk)
  //  > .el-form-item__label:before {
  //    content: "*";
  //    color: red;
  //  }
  //
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label {
      background: #ebf4ff;
       box-shadow: 0px 0 0px 0.5px #bcd8f8 inset;
    }
  //
    .el-form-item.is-required .el-input__inner {
      border-color: #bcd8f8;
    }
  //
  //  .el-form-item--mini > .el-form-item__label {
  //    height: 28px;
  //    font-size: 12px;
  //    line-height: 26px;
  //  }
  //
  //  .el-form-item--mini > .el-form-item__content {
  //    line-height: 27px;
  //  }
  //
  //  .el-form-item--small > .el-form-item__label {
  //    height: 32px;
  //    font-size: 13px;
  //    line-height: 30px;
  //  }
  //
  //
  //  .el-input--small .el-input__inner {
  //    line-height: 28px;
  //    //border: 1px #C0C4CC solid;
  //    //border-left: 0;
  //    //border: 0;
  //  }
  //
  //  .el-form-item--medium > .el-form-item__label {
  //    height: 36px;
  //    font-size: 14px;
  //    line-height: 33px;
  //  }
  //
  //  .el-form-item.is-error .el-input__inner,
  //  .el-form-item.is-error .el-input__inner:focus,
  //  .el-form-item.is-error .el-textarea__inner,
  //  .el-form-item.is-error .el-textarea__inner:focus,
  //  .el-message-box__input input.invalid,
  //  .el-message-box__input input.invalid:focus {
  //    border-color: #f56c6c !important;
  //    border-left: 1px solid #f56c6c !important;
  //  }
  //
    .el-form-item__label {
       box-shadow: 0px 0 0px 0.5px #c0c4cc inset;
      //border: 1px solid #c0c4cc;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      background: #f6f9fa;
      padding-right: 0;
      padding-left: 12px;
      color: #333333;
      font-size: 13px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  //
    .el-input__inner {
      border-radius: 0;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-left: 0;
    }
  }

}
</style>



